<template>
  <div class="setting">
    <el-card>
      <el-tabs>
        <el-tab-pane label="角色管理" lazy>
          <div class="content">
            <el-button type="primary" @click="openDialog(null, 'add')">
              <i class="el-icon-plus" />
              新增角色
            </el-button>
            <el-table :data="list" border style="margin: 25px 0">
              <el-table-column label="序号">
                <template v-slot="{ $index }">
                  <div>
                    {{ (page.page - 1) * page.pagesize + $index + 1 }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column sortable label="角色名" prop="name" />
              <el-table-column sortable label="描述" prop="description" />
              <el-table-column label="操作">
                <template v-slot="{ row }">
                  <div>
                    <el-button
                      type="text"
                      @click="permissionInfo(row.id)"
                    >分配权限</el-button>
                    <el-button
                      type="text"
                      @click="openDialog(row, 'edit')"
                    >修改</el-button>
                    <el-button
                      type="text"
                      @click="delRole(row.id)"
                    >删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right">
              <el-pagination
                layout="total,sizes,prev,pager,next,jumper"
                :total="page.total"
                :current-page="page.page"
                :page-size="page.pagesize"
                :page-sizes="[1, 2, 5, 10, 20, 30, 100]"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司信息" lazy>
          <company-info />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <Add ref="add" :show.sync="show" />
    <PermissionSet ref="role" :is-show.sync="isShow" />
  </div>
</template>

<script>
import { sysRole, delRole } from '@/api/setting'
import companyInfo from './components/companyInfo.vue'
import Add from './components/Add.vue'
import PermissionSet from './components/permissionSet.vue'
export default {
  components: {
    companyInfo,
    Add,
    PermissionSet
  },
  data() {
    return {
      isShow: false,
      show: false,
      list: [{}],
      page: {
        total: 50,
        page: 1,
        pagesize: 5
      }
    }
  },
  created() {
    this.getRole()
  },

  methods: {
    // 当前点击页码
    handleCurrentChange(page) {
      // console.log(page)
      this.page.page = page
      this.getRole()
    },
    // 当前选择页容量
    handleSizeChange(size) {
      // console.log(size)
      this.page.page = 1
      this.page.pagesize = size
      this.getRole()
    },
    // 获取角色列表
    async getRole() {
      const res = await sysRole(this.page)
      // console.log(res);
      this.page.total = res.data.total
      this.list = res.data.rows
    },
    // 打开新增角色对话框
    openDialog(row, mode) {
      this.show = true
      this.$refs.add.mode = mode
      if (this.$refs.add.mode === 'edit') {
        this.$refs.add.form = JSON.parse(JSON.stringify(row))
      }
    },
    // 删除角色
    delRole(id) {
      this.$confirm('您确定要删除该角色吗?', '温馨提示')
        .then(async() => {
          await delRole(id)
          this.$message.success('删除角色成功!')
          this.page.page = 1
          this.getRole()
        })
        .catch(() => {})
    },
    // 分配权限
    permissionInfo(id) {
      this.isShow = true
      this.$refs.role.getPermission(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.setting {
  padding: 15px;
  .content {
    padding: 40px 30px;
  }
}
</style>
